<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search">
			<view class="search-a">
				<view class="cu-bar search bg-white">
					<view class="search-form round" @click="wyJump()">
						<text class="cuIcon-search"></text>
						<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
							placeholder="点击前往搜索" confirm-type="search"></input>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="bananer">
			<view class="bananer-a">
				<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
				 :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url"></image>
						<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 轮播图下面 -->
		<view class="bananerBottom" style="display: flex; flex-wrap: wrap; padding: 10px 0px 10px 10px; background-color: white;">
			<view class="bananerBottom-a" v-for="(item,index) in list" :key="index" style="width: 50px; height: 50px; margin-left: 10px;"
			@click="goCate(item.id)"
			>
				<image :src="item.iconUrl" style="width: 20px; height: 20px; margin-left: 5px;"></image>
				<text style="display: block; margin-top: 1px;">{{item.name}}</text>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="coupons" style="background-color: white; margin-top: 15px; height: 380px;">
			<text style="font-size: 14px; display: block; padding-left: 15px; padding-top: 10px;">优惠券</text>
			<view class="coupons-a"  style="border: 1px solid red; height: 100px; margin: 10px 15px; " v-for="(item,index) in liste" :key="index">
				<view class="" style="display: flex; margin-top: 20px; margin-left: 20px;">
					<view class="" style="text-align: left;">
						<h2 style="color: #FF4444;">￥{{item.discount}}元</h2>
						<text style="color: #969799; font-size: 12px;">{{item.desc}}·无限制</text>
					</view>
					<view class="" style="margin-top: 12px;">
						<h2 style="font-size: 16px; display: block; margin-top: -5px; margin-bottom: 5px;">{{item.name}}</h2>
						<text style="color: #969799; font-size: 12px; display: block;">有效期: {{item.days}}天</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 团购专区 -->
		<view class="buy" style="background-color: white; margin-top: 15px; height: 44.8px;">
			<text style="font-size: 14px; display: inline-block; padding-left: 15px; padding-top: 10px;">团购专区</text>
			<text style="display: inline-block; margin-left: 250px; color: #999999; font-size: 12px;" @click="getBuyb()">更多团购商品 ></text>
			<view class="">
				<view class=""></view>
				<view class=""></view>
				<view class=""></view>
			</view>
		</view>
		<!-- 品牌专区 -->
		<view class="brand" style="background-color: white; margin-top: 15px; height: 329px;">
			<text style="font-size: 14px; display: inline-block; padding-left: 15px; padding-top: 10px;">品牌商直供</text>
			<text style="display: inline-block; margin-left: 250px; color: #999999; font-size: 12px;" @click="getBrandb()">更多品牌商 ></text>
			<view class="" style="display: flex; flex-wrap: wrap;align-content: stretch;justify-content: space-evenly;">
				<view class="brand-a" v-for="(item,index) in lista" :key="index" @click="branda(item.id)" style="margin: 30px 10px 0px 10px;">
					<image :src="item.picUrl" style="width: 160px; height: 89px;"></image>
					<br />
					<text style="text-align: center; display: block;">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 新品首发 -->
		<view class="new" style="background-color: white; height: 715px; margin-top: 15px;">
			<text style="font-size: 14px; display: inline-block; padding-left: 15px; padding-top: 10px;">新品首发</text>
			<text style="display: inline-block; margin-left: 250px; color: #999999; font-size: 12px;" @click="getXin()">更多新品首发 ></text>
			<view class="new-a" style="display: flex; flex-wrap: wrap;">
				<view class="new-b" v-for="(item,index) in listb" :key="index" style="height: 222.4px; margin-left: 20px;" @click="wyJumpWy(item.id)">
					<image :src="item.picUrl" mode="" style="width: 180px; height: 180px;"></image>
					<text style="display: block; text-align: center; color: #7B7474;" >{{item.name}}</text>
					<text style="display: block; text-align: center; margin-top: 5px; color: #AB956D;">￥ {{item.retailPrice}}</text>
				</view>
			</view>
		</view>
		<!-- 人气推荐 -->
		<view class="popular" style="background-color: white; height: 800px; margin-top: 15px;">
			<text style="font-size: 14px; display: inline-block; padding-left: 15px; padding-top: 10px;">人气推荐</text>
			<text style="display: inline-block; margin-left: 250px; color: #999999; font-size: 12px;" @click="getRen()">更多人气推荐 ></text>
			<view class="popular-a" style="display: flex; flex-wrap: wrap;">
				<view class="popular-b" v-for="(item,index) in listc" :key="index" style="margin: 15px 0px 10px 10px; height: 104px; width: 430px; display: flex; ">
					<image :src="item.picUrl" style="width: 88px; height: 88px; margin-top: 10px;" @click="wyJumpWy(item.id)"></image>
					<view class="" style="margin-left: 15px; position: relative;">
						<view class="" style="margin-bottom: 45px;">
							<text style="font-size: 14px;">{{item.name}}</text>
							<br />
							<text style="font-size: 14px; color: #646566;">{{item.brief}}</text>
						</view>
							<view class="">
								<text style="font-size: 12px;">￥</text>
								<text style="font-size: 16px;">{{item.retailPrice}}</text>
								<text style="font-size: 12px;">.00</text>
							</view>
							<text style="display: inline-block; position: absolute; top: 90px; left: 52px; font-size: 10px; color: #969799; text-decoration: line-through;">￥{{item.counterPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 专题精选 -->
		<view class="selected" style="background-color: white; height: 500px; margin-top: 15px;">
			<text style="font-size: 14px; display: inline-block; padding-left: 15px; padding-top: 10px;">专题精选</text>
			<text style="display: inline-block; margin-left: 250px; color: #999999; font-size: 12px;" @click="getZhuan()">更多专题精选 ></text>
			<view class=""  style=" display: flex; flex-wrap: wrap; margin-top: 25px;">
				<view class="" style="height: 226.8px; width: 215px; text-align: center;" v-for="(item,index) in listd" :key="index" @click="zhuanti(item.id)">
					<image :src="item.picUrl" style="width: 180px; height: 150px;"></image>
					<text style="font-size: 14px; color:#AB956D; text-align: center; display: block;">{{item.title}}</text>
					<text style="font-size: 10px; color:#AB956D; text-align: center; display: block;">{{item.subtitle}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { get } from '@/lib/http.js';
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [],
				list:[],
				lista:[],
				listb:[],
				listc:[],
				listd:[],
				liste:[],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				current: 0,
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			this.getImage(),
			this.getNew(),
			this.getBaby(),
			this.getNewa(),
			this.getPopular(),
			this.getSelected(),
			this.getCoupons()
			// this.getBuyb()
		},
		methods: {
			wyJumpWy(prodid){
				// 将 val 转换为 JSON 字符串
				const valStr = encodeURIComponent(JSON.stringify(prodid));
				uni.navigateTo({
					url: `/pages/detail/detail?prodid=${valStr}`
				});
			},
			wyJump(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			goCate(val){
				uni.navigateTo({
					url: '/pages/category/category?itemClass='+val
				})
			},
			getBuyb(){
				uni.navigateTo({
					url: '/pages/groupon/groupon',
				});
			},
			getBrandb(){
				uni.navigateTo({
					url: '/pages/brand-list/brand-list',
				});
			},
			pinpai(e) {
				this.current = e.branda.current;
			},
			branda(id) {
				console.log(id)
				uni.navigateTo({
					url: `/pages/branda/branda?id=${id}`
				})
			},
			getXin() {
				uni.navigateTo({
					url: '/pages/new/new',
				});
			},
			getRen() {
				uni.navigateTo({
					url: '/pages/hot/hot',
				});
			},
			getZhuan() {
				uni.navigateTo({
					url: '/pages/topic-list/topic-list',
				});
			},
			zhuanti(id) {
				uni.navigateTo({
					url: `/pages/topic/topic?id=${id}`
				})
			},
			getImage(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---'),
						this.swiperList=res.data.data.banner
						console.log(this.swiperList)
					}
				})
			},
			getNew(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---'),
						this.list=res.data.data.channel
						console.log(this.list)
					}
				})
			},
			getBaby(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---'),
						this.lista=res.data.data.brandList
						console.log(this.lista)
					}
				})
			},
			getNewa(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---wy'),
						this.listb=res.data.data.newGoodsList
						console.log(this.listb)
					}
				})
			},
			getPopular(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---'),
						this.listc=res.data.data.hotGoodsList
						console.log(this.listc)
					}
				})
			},
			getSelected(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---'),
						this.listd=res.data.data.topicList
						console.log(this.listd)
					}
				})
			},
			getCoupons(){
				//请求的数据
				uni.request({
					url:'http://admin.bsmall.byesame.com/wx/home/index',
					data:{},
					header:{},
					success:(res)=>{
						console.log(res,'请求出来的应用列表---'),
						this.liste=res.data.data.couponList
						console.log(this.liste)
					}
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},
			
			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/index/index.css";
</style>